{% extends "layouts/base.html" %}

{% block title %} UI Button {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}	

	<!-- [ Main Content ] start -->
	<div class="pcoded-main-container">
		<div class="pcoded-content">
			<!-- [ breadcrumb ] start -->
			<div class="page-header">
				<div class="page-block">
					<div class="row align-items-center">
						<div class="col-md-12">
							<div class="page-header-title">
								<h5 class="m-b-10">Button</h5>
							</div>
							<ul class="breadcrumb">
								<li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
								<li class="breadcrumb-item"><a href="#!">Basic Components</a></li>
								<li class="breadcrumb-item"><a href="#!">Button</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- [ breadcrumb ] end -->
			<!-- [ Main Content ] start -->
			<!-- [ button ] start -->
			<div class="row btn-page">
				<!-- [ default-button ] start -->
				<div class="col-sm-12">
					<div class="card">
						<div class="card-header">
							<h5>Default</h5>
						</div>
						<div class="card-body">
							<button type="button" class="btn  btn-primary">Primary</button>
							<button type="button" class="btn  btn-secondary">Secondary</button>
							<button type="button" class="btn  btn-success">Success</button>
							<button type="button" class="btn  btn-danger">Danger</button>
							<button type="button" class="btn  btn-warning">Warning</button>
							<button type="button" class="btn  btn-info">Info</button>
							<button type="button" class="btn  btn-light">Light</button>
							<button type="button" class="btn  btn-dark">Dark</button>
							<button type="button" class="btn  btn-link">Link</button>
						</div>
					</div>
				</div>
				<!-- [ default-button ] end -->
				<!-- [ outline-button ] start -->
				<div class="col-sm-12">
					<div class="card">
						<div class="card-header">
							<h5>Outline</h5>
						</div>
						<div class="card-body">
							<button type="button" class="btn  btn-outline-primary">Primary</button>
							<button type="button" class="btn  btn-outline-secondary">Secondary</button>
							<button type="button" class="btn  btn-outline-success">Success</button>
							<button type="button" class="btn  btn-outline-danger">Danger</button>
							<button type="button" class="btn  btn-outline-warning">Warning</button>
							<button type="button" class="btn  btn-outline-info">Info</button>
							<button type="button" class="btn  btn-outline-light">Light</button>
							<button type="button" class="btn  btn-outline-dark">Dark</button>
						</div>
					</div>
				</div>
				<!-- [ outline-button ] end -->
				<!-- [ disabled-button ] start -->
				<div class="col-sm-12">
					<div class="card">
						<div class="card-header">
							<h5>Disabled Button</h5>
						</div>
						<div class="card-body">
							<p>use <code>.disabled</code> in class <code>.btn</code> class to get Disabled button</p>
							<button type="button" class="btn disabled btn-primary">Primary</button>
							<button type="button" class="btn disabled btn-secondary">Secondary</button>
							<button type="button" class="btn disabled btn-success">Success</button>
							<button type="button" class="btn disabled btn-danger">Danger</button>
							<button type="button" class="btn disabled btn-warning">Warning</button>
							<button type="button" class="btn disabled btn-info">Info</button>
							<button type="button" class="btn disabled btn-light">Light</button>
							<button type="button" class="btn disabled btn-dark">Dark</button>
						</div>
					</div>
				</div>
				<!-- [ disabled-button ] end -->
				<!-- [ size-button ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Sizes [ Large ]</h5>
						</div>
						<div class="card-body">
							<p>use <code>.btn-lg</code> in class <code>.btn</code> class to get Large button</p>
							<button type="button" class="btn  btn-primary btn-lg">Large button</button>
							<button type="button" class="btn  btn-secondary btn-lg">Large button</button>
						</div>
					</div>
				</div>
				<!-- [ size-button ] end -->
				<!-- [ size-small-button ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Sizes [ Small ]</h5>
						</div>
						<div class="card-body">
							<p>use <code>.btn-sm</code> in class <code>.btn</code> class to get Small button</p>
							<button type="button" class="btn  btn-primary btn-sm">Small button</button>
							<button type="button" class="btn  btn-secondary btn-sm">Small button</button>
						</div>
					</div>
				</div>
				<!-- [ size-small-button ] end -->
				<!-- [ checkbox-button ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Checkbox Button</h5>
						</div>
						<div class="card-body">
							<div class="btn-group-toggle" data-toggle="buttons">
								<label class="btn  btn-secondary active">
									<input type="checkbox" checked> Checked</label>
							</div>
						</div>
					</div>
				</div>
				<!-- [ checkbox-button ] end -->
				<!-- [ radio-button ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Radio Buttons</h5>
						</div>
						<div class="card-body">
							<div class="btn-group btn-group-toggle" data-toggle="buttons">
								<label class="btn  btn-secondary active">
									<input type="radio" name="options" id="option1" checked> Active</label>
								<label class="btn  btn-secondary">
									<input type="radio" name="options" id="option2"> Radio</label>
								<label class="btn  btn-secondary">
									<input type="radio" name="options" id="option3"> Radio</label>
							</div>
						</div>
					</div>
				</div>
				<!-- [ radio-button ] end -->
			</div>
			<div class="row btn-page">
				<!-- [ button-icon ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Button With Icon</h5>
						</div>
						<div class="card-body">
							<button type="button" class="btn btn-primary"><i class="feather mr-2 icon-thumbs-up"></i>Primary</button>
							<button type="button" class="btn btn-secondary"><i class="feather mr-2 icon-camera"></i>Secondary</button>
							<button type="button" class="btn btn-success"><i class="feather mr-2 icon-check-circle"></i>Success</button>
							<button type="button" class="btn btn-danger"><i class="feather mr-2 icon-slash"></i>Danger</button>
							<button type="button" class="btn btn-warning"><i class="feather mr-2 icon-alert-triangle"></i>Warning</button>
							<button type="button" class="btn btn-info"><i class="feather mr-2 icon-info"></i>Info</button>
						</div>
					</div>
				</div>
				<!-- [ button-icon ] end -->
				<!-- [ button-outline ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Outline Icon Buttons</h5>
						</div>
						<div class="card-body">
							<button type="button" class="btn btn-outline-primary"><i class="feather mr-2 icon-thumbs-up"></i>Primary</button>
							<button type="button" class="btn btn-outline-secondary"><i class="feather mr-2 icon-camera"></i>Secondary</button>
							<button type="button" class="btn btn-outline-success"><i class="feather mr-2 icon-check-circle"></i>Success</button>
							<button type="button" class="btn btn-outline-danger"><i class="feather mr-2 icon-slash"></i>Danger</button>
							<button type="button" class="btn btn-outline-warning"><i class="feather mr-2 icon-alert-triangle"></i>Warning</button>
							<button type="button" class="btn btn-outline-info"><i class="feather mr-2 icon-info"></i>Info</button>
						</div>
					</div>
				</div>
				<!-- [ button-outline ] end -->
				<!-- [ only-icon ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Only Icon</h5>
						</div>
						<div class="card-body">
							<button type="button" class="btn  btn-icon btn-primary"><i class="feather icon-thumbs-up"></i></button>
							<button type="button" class="btn  btn-icon btn-secondary"><i class="feather icon-camera"></i></button>
							<button type="button" class="btn  btn-icon btn-success"><i class="feather icon-check-circle"></i></button>
							<button type="button" class="btn  btn-icon btn-danger"><i class="feather icon-slash"></i></button>
							<button type="button" class="btn  btn-icon btn-warning"><i class="feather icon-alert-triangle"></i></button>
							<button type="button" class="btn  btn-icon btn-info"><i class="feather icon-info"></i></button>
						</div>
					</div>
				</div>
				<!-- [ only-icon ] end -->
				<!-- [ outline-icon ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Outline Icon</h5>
						</div>
						<div class="card-body">
							<button type="button" class="btn  btn-icon btn-outline-primary"><i class="feather icon-thumbs-up"></i></button>
							<button type="button" class="btn  btn-icon btn-outline-secondary"><i class="feather icon-camera"></i></button>
							<button type="button" class="btn  btn-icon btn-outline-success"><i class="feather icon-check-circle"></i></button>
							<button type="button" class="btn  btn-icon btn-outline-danger"><i class="feather icon-slash"></i></button>
							<button type="button" class="btn  btn-icon btn-outline-warning"><i class="feather icon-alert-triangle"></i></button>
							<button type="button" class="btn  btn-icon btn-outline-info"><i class="feather icon-info"></i></button>
						</div>
					</div>
				</div>
				<!-- [ outline-icon ] end -->
			</div>
			<div class="row btn-page">
				<!-- [ basic-dropdown-button ] start -->
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h5>Basic Dropdown Button</h5>
						</div>
						<div class="card-body">
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- [ basic-dropdown-button ] end -->
				<!-- [ split-danger-button ] start -->
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h5>Split Dropdown Button</h5>
						</div>
						<div class="card-body">
							<!-- Example split danger button -->
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-primary">Primary</button>
								<button type="button" class="btn  btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-secondary">Secondary</button>
								<button type="button" class="btn  btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-success">Success</button>
								<button type="button" class="btn  btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-danger">Danger</button>
								<button type="button" class="btn  btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-warning">Warning</button>
								<button type="button" class="btn  btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-info">Info</button>
								<button type="button" class="btn  btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- [ split-danger-button ] end -->
				<!-- [ outline-dropdown-button ] start -->
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h5>Basic Outline Dropdown Button</h5>
						</div>
						<div class="card-body">
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button class="btn  btn-outline-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- [ outline-dropdown-button ] end -->
				<!-- [ split-dropdown-button ] start -->
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h5>Split Outline Dropdown Button</h5>
						</div>
						<div class="card-body">
							<!-- Example split danger button -->
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-outline-primary">Primary</button>
								<button type="button" class="btn  btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-outline-secondary">Secondary</button>
								<button type="button" class="btn  btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-outline-success">Success</button>
								<button type="button" class="btn  btn-outline-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-outline-danger">Danger</button>
								<button type="button" class="btn  btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-outline-warning">Warning</button>
								<button type="button" class="btn  btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
							<div class="btn-group mb-2 mr-2">
								<button type="button" class="btn  btn-outline-info">Info</button>
								<button type="button" class="btn  btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#!">Action</a>
									<a class="dropdown-item" href="#!">Another action</a>
									<a class="dropdown-item" href="#!">Something else here</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#!">Separated link</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- [ split-dropdown-button ] end -->
			</div>
			<div class="row btn-page">
				<!-- [ basic-button-group ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Basic Button Group</h5>
						</div>
						<div class="card-body">
							<div class="btn-group mb-2" role="group" aria-label="Basic example">
								<button type="button" class="btn  btn-secondary">Left</button>
								<button type="button" class="btn  btn-secondary">Middle</button>
								<button type="button" class="btn  btn-secondary">Right</button>
							</div>
						</div>
					</div>
				</div>
				<!-- [ basic-button-group ] end -->
				<!-- [ button-toolbar ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Button Toolbar</h5>
						</div>
						<div class="card-body">
							<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
								<div class="btn-group mr-2 mb-1" role="group" aria-label="First group">
									<button type="button" class="btn  btn-secondary">1</button>
									<button type="button" class="btn  btn-secondary">2</button>
									<button type="button" class="btn  btn-secondary">3</button>
									<button type="button" class="btn  btn-secondary">4</button>
								</div>
								<div class="btn-group mr-2 mb-1" role="group" aria-label="Second group">
									<button type="button" class="btn  btn-secondary">5</button>
									<button type="button" class="btn  btn-secondary">6</button>
									<button type="button" class="btn  btn-secondary">7</button>
								</div>
								<div class="btn-group mb-1" role="group" aria-label="Third group">
									<button type="button" class="btn  btn-secondary">8</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- [ button-toolbar ] end -->
				<!-- [ button-toolbar-size ] start -->
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h5>Button Toolbar Size</h5>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-xl-4 col-md-12 mb-2">
									<p>use <code>.btn-group-lg</code> in class <code>.btn-group</code> class to get Large size button group</p>
									<div class="btn-group btn-group-lg" role="group" aria-label="button groups xl">
										<button type="button" class="btn  btn-secondary">Left</button>
										<button type="button" class="btn  btn-secondary">Middle</button>
										<button type="button" class="btn  btn-secondary">Right</button>
									</div>
								</div>
								<div class="col-xl-4 col-md-6 mb-2">
									<p>this is default size</p>
									<div class="btn-group" role="group" aria-label="button groups">
										<button type="button" class="btn  btn-secondary">Left</button>
										<button type="button" class="btn  btn-secondary">Middle</button>
										<button type="button" class="btn  btn-secondary">Right</button>
									</div>
								</div>
								<div class="col-xl-4 col-md-6 mb-2">
									<p>use <code>.btn-group-sm</code> in class <code>.btn-group</code> class to get Small size button group</p>
									<div class="btn-group btn-group-sm" role="group" aria-label="button groups sm">
										<button type="button" class="btn  btn-secondary">Left</button>
										<button type="button" class="btn  btn-secondary">Middle</button>
										<button type="button" class="btn  btn-secondary">Right</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- [ button-toolbar-size ] end -->
				<!-- [ nesting ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Nesting</h5>
						</div>
						<div class="card-body">
							<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
								<button type="button" class="btn  btn-secondary">1</button>
								<button type="button" class="btn  btn-secondary">2</button>
								<div class="btn-group" role="group">
									<button id="btnGroupDrop1" type="button" class="btn  btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										Dropdown
									</button>
									<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
										<a class="dropdown-item" href="#!">Dropdown link</a>
										<a class="dropdown-item" href="#!">Dropdown link</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- [ nesting ] end -->
				<!-- [ vertical-variation ] start -->
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">
							<h5>Vertical Variation</h5>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-4">
									<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
										<button type="button" class="btn  btn-secondary">1</button>
										<button type="button" class="btn  btn-secondary">2</button>
										<button type="button" class="btn  btn-secondary">3</button>
									</div>
								</div>
								<div class="col-8">
									<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
										<button type="button" class="btn  btn-secondary">1</button>
										<button type="button" class="btn  btn-secondary">2</button>
										<div class="btn-group" role="group">
											<button id="btnGroupDrop3" type="button" class="btn  btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
											<div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
												<a class="dropdown-item" href="#!">Dropdown link</a>
												<a class="dropdown-item" href="#!">Dropdown link</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- [ vertical-variation ] end -->
			</div>
		</div>
	</div>
	<!-- [ Main Content ] end -->
	
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}
